/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
<!--      <el-form-item label="搜索：">-->
<!--        <el-input size="small" v-model="formInline.vodName" placeholder="输入视频名称"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item>
<!--        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>-->
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit1()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="vodName" label="视频名称">
      </el-table-column>
      <el-table-column sortable prop="playCount" label="播放次数" >
      </el-table-column>
      <el-table-column sortable prop="duration" label="视频时长" >
      </el-table-column>
      <el-table-column sortable prop="videoSourceId" label="资源id" >
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" >
        <template slot-scope="scope">
          <div>{{scope.row.createTime|timestampToTime}}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 3, 4, 5, listData.length]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listData.length">
    </el-pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm"  ref="editForm">
        <el-form-item label="视频名称" prop="vodName">
          <el-input size="small" v-model="editForm.vodName" auto-complete="off" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="视频封面" prop="vodImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="editForm.vodImg" :src="editForm.vodImg" v-model="editForm.vodImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>


    <!-- 添加界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible1" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="addForm"  ref="editForm">
        <el-form-item label="视频封面" prop="vodImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="addForm.vodImg" :src="addForm.vodImg" v-model="addForm.vodImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传视频" prop="vodImg">
        <el-upload
          class="upload-demo"
          action="http://localhost:8099/vod/uploadAlyiVideo"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm1()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {deptList, deptSave, deptEdit, deptDelete, deptDelete1, userDelete} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 2,
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      editFormVisible1:false,
      title: '添加',
      editForm: {
        vodId: '',
        vodName: '',
        vodImg: '',
      },
      addForm: {
        vodName: '',
        playCount: 0,
        videoSourceId: '',
        vodImg:'',
        vodUrl:'',
      },
      formInline: {

      },
      listData:'',
      fileList:[],
      vodImg:''
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  created() {
    //this.getdata(this.formInline)
    //全查视频
    this.search()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //图片上传
    handleAvatarSuccess(res) {

      this.categoryImg = res.data.url
      this.addForm.vodImg =res.data.url
      this.editForm.vodImg =res.data.url
      this.imagecropperKey =this.imagecropperKey+1
      console.log(this.addForm.vodImg)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
  //上传文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(res) {
      // console.log(file.response.data);
      // console.log(file.url);
      // console.log(file)
      console.log(res.response)

      this.addForm.vodName = res.name
      this.addForm.videoSourceId= res.response

      this.$axios.get('http://localhost:8099/vod/getPlay/'+this.addForm.videoSourceId)
        .then(res => {
          console.log(res.data.data.url)
          this.addForm.vodUrl = res.data.data.url
        })
        .catch(res => {
          console.log('出错了')
          console.log(res)
        })

    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file) {
      this.$confirm(`确定移除 ${ file.name }？`, '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        // 删除
        deptDelete(file.response)
          .then(res => {
            if (res.code == 20000) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
      })
        .catch(() => {
          this.$message({

            type: 'info',
            message: '已取消删除！'
          })
        })


    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
    },

    // 搜索事件
    search() {
      deptList(this.formInline).then(res => {
        this.loading = false
        this.listData = res.data.data.list
        console.log(this.listData)
      })
        .catch(err => {
          this.loading = false
          this.$message.error('视频信息加载失败，请稍后再试！')
        })
    },
    //显示编辑界面
    handleEdit(row) {
      this.editFormVisible = true
      this.title = '修改'
      this.editForm = {...row };
    },
    handleEdit1() {
      this.editFormVisible1 = true
      this.title = '添加'
    },
    // 编辑页面保存方法
    submitForm(editData) {
      deptEdit(this.editForm)
        .then(res => {
          this.editFormVisible = false
          this.loading = false

          if (res.code == 20000) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
          this.search()
          this.editFormVisible = false
        })
        .catch(err => {
          this.editFormVisible = false
          this.loading = false
          this.$message.error('公司保存失败，请稍后再试！')
        })
    },
    //添加
    submitForm1() {
      console.log(this.addForm)
      deptSave(this.addForm)
        .then(res => {
          this.editFormVisible1 = false
          this.loading = false
          if (res.code == 20000) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
          this.search()
        })
        .catch(err => {
          this.editFormVisible1 = false
          this.loading = false
          this.$message.error('保存失败，请稍后再试！')
        })
    },
    // 删除公司
    deleteUser(row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete1(row.vodId)
            console.log(row)

            deptDelete(row.videoSourceId)
            .then(res => {
              if (res.code == 20000) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              }
              this.search()
            })

            .catch(err => {
              this.loading = false
              this.$message.error('视频删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
      this.editFormVisible1 = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 30px ;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


